<template lang="">
    <div>
        <ul>
            全选<input type="checkbox" v-model="allCkd" @change="all()">
            <li v-for="(item, index) in productArr" :key="index">
                <input type="checkbox" v-model="item.isCkd">
                --商品名称：{{item.name}}--
                --商品价格：{{item.price}}
                <button  @click="minus(index)">-</button>
                {{item.num}}
                <button @click="add(index)">+</button>
                --总价：{{item.price*item.num}}
            </li>
        </ul>
        总价{{allPrice}}
    </div>
</template>
<script>
export default {
    mounted() {
        this.productArr.forEach(item => {
            item.num = 1
            item.isCkd = false
        })
    },
    data() {
        return {
            productArr: [
                { id: 1, name: "羊肉串", price: 5 },
                { id: 2, name: "羊腰子", price: 20 },
                { id: 3, name: "牛肉串", price: 5 },
            ],
            allCkd:false
        }
    },
    methods: {
        add(index) {
            this.productArr[index].num++
        },
        minus(index) {
            if (this.productArr[index].num > 1) {
                this.productArr[index].num--
            }
        },
        all(){
            this.productArr.forEach(item => {
                item.isCkd = this.allCkd
            })
        }
    },
    computed: {
        allPrice() {
            let a=this.productArr.filter((item => {
                return item.isCkd == true
            })).reduce((prev, next) => {
                return prev + next.price * next.num
            }, 0)
            return a
        }
    }
}
</script>
<style lang="">
    
</style>